<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <!--<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/website.css" />
		<script src="http://172.27.30.11:8081/target/target-script-min.js#anonymous"></script>
        <title>Contact Example</title>
    </head>
    <body>
    	<div id="main" data-role="page"> 
	        <div>
	            <h3>Phonegap Contacts Example</h3>
	            <div>
	            	<div class="ui-grid-b">
						<div class="ui-block-a"><a id="insertBtn" data-role="button" data-theme="b"  data-mini="true">添加联系人</a></div>
						<div class="ui-block-b"><a id="queryBtn" data-role="button" data-theme="b"  data-mini="true">列出联系人</a></div>
					</div>
	            </div>
	            
	            <div>
	            	<table id="resultList" border=0 width="300px">
	            		<thead>查询结果</thead>
	            		<tbody></tbody>
	            	</table>
	            </div>
	            
	        </div>
	        
	        <div data-role="popup" id="addWindow" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
		        <div data-role="header" data-theme="b" class="ui-corner-top">
					<h1>联系人</h1>
				</div>
				<div id="msgdiv" style="color:#0066FF"></div>
				<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
					<label>name:</label>
					<input type="text" name="name" id="displayname" value="" />
					<label>phonenumber:</label>
					<input type="text" name="name" id="phonenumber" value="" />
					<a id="saveBtn" href="#" data-role="button" data-inline="true" data-transition="flow" data-theme="b">保存</a>
					<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">关闭</a>  
				</div>				
			</div>
        </div> 
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
		
        <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript">
					$('#main').live('pageshow',function(){
						$('#insertBtn').bind('click',function(){
							$('#addWindow').popup('open');
						});
						$('#saveBtn').bind('click',onSaveBtnClick);
						$('#queryBtn').bind('click',onQueryBtnClick);
					});
					
					
					function onSaveBtnClick(){
						var name = $('#displayname').val();
						var phonenumber = $('#phonenumber').val();
						if(name!=''&& phonenumber!=''){
							var contact = navigator.contacts.create();
							// store contact phone numbers in ContactField[]
							contact.displayName = name;
							var phoneNumbers = [];
							phoneNumbers[0] = new ContactField('mobile',phonenumber, true); // preferred number
							contact.phoneNumbers = phoneNumbers;
							// save the contact
							contact.save();
							$('#addWindow').popup('close');
							alert('新增成功');
							$('#queryBtn').trigger('click');
							$('#msgdiv').empty();
							$('#displayname').val('');
							$('#phonenumber').val('');
						}else{
							$('#msgdiv').text('请输入name和phonenumber!!');
						}
					}
					function onQueryBtnClick(){
						var options = new ContactFindOptions();
						var filter = ["displayName","phoneNumbers"];
						options.filter="";
						options.multiple = true;
						navigator.contacts.find(filter, onSuccess, onError, options);
					}
					function onSuccess(contacts) {
						$('#resultList > tbody').empty();
						var html = [];
						for (var i=0; i<contacts.length; i++) {
							// display phone numbers
							html.push('<tr style="background:#ccc;color:#0066FF;">'+
													'<td>'+i+'</td>'+
													'<td>'+contacts[i].displayName+'</td>'+
													'<td>'+contacts[i].phoneNumbers+'</td>'+
											'</tr>'
										);
						}
						$('#resultList > tbody').append($(html.join('')));
					}
					
					function onError(contactError) {
							alert('onError!');
					}
		</script>
    </body>
</html>
